<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>同城 - 生活圈 - 站酷(ZCOOL)</title>
		<link rel="icon" href="../img/lbd_favicon.ico"/>
		<link rel="stylesheet" href="../css/tongcheng-bg.css" />
		<link rel="stylesheet" type="text/css" href="../css/lnz-iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/index_header_footer.css"/>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<style type="text/css">
			body{
				height: 6090px;
			}
			ul,ol{
				list-style: none;
			}
			a{
				color: black;
				text-decoration: none;
			}
			.a1{
	        	color: rgb(153,153,153);
	        	border-bottom: none;
	        }
	         .a1:hover{
	        	color: #000000;
	        	border-bottom: 2px solid rgb(68,68,68);
	        	padding-bottom: 24px;
	        }
	        .a3{
	        	color: #000000;
	        	border-bottom: 2px solid rgb(68,68,68);
	        	padding-bottom: 24px;
	        }
			.container{
				width: 100%;
	      		height: 5600px;
	      		background: rgb(244,244,244);
	      		position: relative;
			}
			.active-title{
				width: 60%;
				height: 40px;
				margin: 0 auto;
				background: rgb(244,244,244);
			}
			.active-title>span{
				float: left;
				font-size: 14px;
    			color: #666;
    			line-height: 40px;
			}
			.more{
				width: 60px;
				height: 40px;
				float: right;
				cursor: pointer;
			}
			.more span{
				line-height: 40px;
			}
			.more-list{
				position: relative;
				min-width: 122px;
			    max-height: 612px;
			    float: right;
			   	border-radius: 8px;
			   	box-shadow: 0px 0px 4px #999999;
			   	display: none;
			   	z-index: 5;
			}
			.more-list ul li{
				width: 120px;
			    height: 45px;
			    line-height: 45px;
			    background: white;
			    display: list-item;
			    cursor: pointer;
			    padding-left: 20px;
			    border-radius: 5px;
			    
			    /*display: none;*/
			}
			.more-list ul li:hover{
				background: rgb(242,242,242);
			}
			
			
			
			
			
			
			
			
			
			/*作者们的展示*/
			.active-show1{
				width: 60%;
				height: 1185px;
				margin: 10px auto;
				background: white;
				position: relative;
				
			}
			/*作者介绍*/
			.active-jieshao{
				width: 840px;
				height: 48px;
				position: absolute;
				top: 30px;
				left: 50px;
				/*background: khaki;*/
			}
			.touxiang{
				float: left;
			}
			.touxiang img{
				cursor: pointer;
			}
			.left{
				float: left;
				margin-left: 8px;
				margin-top: 5px;
			}
			.left a{
				font-size: 18px;
				color: #000000;
				display: block;
			}
			.left span{
				font-size: 12px;
				color: #999999;
				display: block;
			}
			.left a:hover{
				color: rgb(211,111,22);
			}
			.guanzhu-box{
				float: right;
				padding-right: 10px;
				padding-top: 6px;
			}
			.guanzhu-box input{
				width: 80px;
			    font-size: 14px;
			    box-sizing: border-box;
			    height: 36px;
			    line-height: 36px;
			    color: #444;
			    background: #ffe300;
			    border: 1px solid #ffe300;
			    border-radius: 4px;
			    cursor: pointer;
			}
			.guanzhu-box input:hover{
				box-shadow: 0px 0px 3px 0px inset;
			}
			/*网址开始*/
			.active-wangzhi{
				width: 840px;
				height: 80px;
				/*background: lawngreen;*/
				position: absolute;
				top: 90px;
				left: 50px;
			}
			.active-wangzhi p{
				width: 840px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
			}
			.active-wangzhi p img{
				width: 22px;
				height: 22px;
			}
			/*图片*/
			.active-img{
				width: 840px;
				height: 80px;
				position: absolute;
				top: 180px;
				left: 50px;
			}
			.active-img img{
				width: 410px;
				height: 728.88px;
			}
			.active-img img:hover{
				cursor: pointer;
				opacity: 0.85;
			}
			/*留言*/
			.active-liuyan{
				width: 840px;
				height: 80px;
				position: absolute;
				top: 950px;
				left: 50px;
				/*background: palegoldenrod;*/
				border-top: 2px solid rgb(244,244,244);
				border-bottom: 2px solid rgb(244,244,244);
			}
			.active-liuyan img{
				border-radius: 50%;
				margin: 20px 0px 0px 20px;
				cursor: pointer;
			}
			.active-liuyan span{
				float: right;
			    width: 75px;
			    height: 36px;
			    text-align: center;
			    line-height: 36px;
			    background: #ffe300;
			    font-size: 20px;
			    color: #666666;
			    border-radius: 100px;
			    position: absolute;
			    right: 0;
			    top: 24px;
			    cursor: pointer;
			}
			/*登陆提示*/
			.active-DLtishi{
			    width: 840px;
			    height: 60px;
			    border: 1px solid #dddddd;
			    background: #f4f4f4;
			    border-radius: 4px;
			    box-sizing: border-box;
			    position: absolute;
			    top: 1050px;
			    left: 50px;
			}
			.active-DLtishi button{
			    width: 80px;
			    font-size: 14px;
			    box-sizing: border-box;
			    height: 36px;
    			line-height: 36px;
			    color: #444;
			    background: #ffe300;
			    border: 1px solid #ffe300;
			    border-radius: 4px;
			    cursor: pointer;
			    margin: 12px 10px 0px 340px;
			}
			.active-DLtishi button:hover{
				color: black;
				opacity: 0.8;
			}
			.active-DLtishi span{
				font-size: 14px;
				margin: 0 auto;
			}
			/*评论*/
			.active-pinglun{
				width: 840px;
				height: 38px;
			    line-height: 18px;
			    margin-top: 15px;
			    font-size: 12px;
			    color: #666;
			    top: 1105px;
			    left: 50px;
			    box-sizing: border-box;
			    position: absolute;
			}
			.active-pinglun a:nth-of-type(1){
			    color: #bbb;
			    pointer-events: none;
			    cursor: default!important;
			}
			.active-pinglun a:nth-of-type(2){
			    width: 80px;
			    height: 36px;
    			line-height: 36px;
			    font-size: 14px;
			    box-sizing: border-box;
			    color: #bbb;
			    background: #eee;
			    border: 1px solid #eee;
			    border-radius: 4px;
			    text-align: center;
			    cursor: default;
			    pointer-events: none;
			    margin: 12px 0px 0px 705px;
			    padding: 12px 26px 12px 26px ;
			}
			/*查看更多*/
			.findmore{
				width: 950px;
				height: 50px;
				background: white;
				font-size: 15px;
				margin: 20px auto;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
			}
			/*返回顶部按钮*/
			.backtop{
				width: 50px;
				height: 50px;
				position: fixed;
				background: rgb(211,211,211);
				float: right;
				right: 80px;
				bottom: 40px;
				cursor: pointer;
				display: none;
			}
			.backtop span{
				font-size: 22px;
				line-height: 50px;
				margin-left: 14px;
				color: white;
			}
		</style>
	</head>
	<body>
		<!--页首的开始-->
		<div id="header">
			<ul>
				<li class="header1"><a href=""><img src="../img/lbd_logo.svg" width="120px" height="20px"/></a></li>
				<li class="header2">
					<ul class="header2_ul1">
						<li><a href="">首页</a></li>
						<li><a href="">发现</a>
						<ul class="faxianxiabiao">
							<li><a href="">平面</a><i></i></li>
							<li><a href="">UI</a><i></i></li>
							<li><a href="">网页</a><i></i></li>
							<li><a href="">插画</a><i></i></li>
							<li><a href="">动漫</a><i></i></li>
							<li><a href="">摄影</a><i></i></li>
							<li><a href="">空间</a></li>
							<li><a href="">工业/产品</a><i></i></li>
							<li><a href="">三维</a><i></i></li>
							<li><a href="">影视</a><i></i></li>
							<li><a href="">手工艺</a><i></i></li>
							<li><a href="">纯艺术</a><i></i></li>
							<li><a href="">服装</a><i></i></li>
							<li><a href="">其他</a></li>
							<li></li>
						
						<ul class="faxianxiabiaodibu">
							<li><a href="">&nbsp;精选作品>&nbsp;</a></li>
							<li><a href="">&nbsp;精选文章&nbsp;></a></li>
							<li><a href="">&nbsp;精选收藏&nbsp;></a></li>
						</ul>
						
						</ul>
						
						</li>
						<li><a href="">同城</a></li>
						<li><a href="">职位</a>
						<ul class="zhiweixiabiao">
							<li><a href="">职位</a></li>
							<li><a href="">公司</a></li>
							<li><a href="">+公布职位</a></li>
						</ul>
							
						</li>
						
						<li><a href="">活动</a>
						<ul class="huodongxiabiao">
							<li><a href="">设计大赛</a></li>
							<li><a href="">专题策划</a></li>
							<li><a href="">线上活动</a></li>
							<li><a href="">线下活动</a></li>
							<li><a href="">学习音频</a></li>
						</ul>
						</li>
						
						<li><a href="">&nbsp;&nbsp;正版素材&nbsp;&nbsp;</a>
						<ul class="zhengbansucaixiabiao">
							<li><a href="">图片</a></li>
							<li><a href="">视频</a></li>
							<li><a href="">字体</a></li>
							<li><a href="">音乐</a></li>
							<li><a href="">我要供图</a></li>
						</ul>
						</li>
						
						<li><a href="">课程</a>
						<ul class="kechengxiabiao">
							<li><a href="">新春促销<img src="../img/lbd_6.8折.jpg"/></a></li>
							<li><a href="">口碑好课</a></li>
						</ul>	
						</li>
						<li><a href="">···</a>
						<ul class="dianxiabiao">
							<li><a href="">榜单</a></li>
							<li><a href="">设计师</a></li>
							<li><a href="">站酷知产</a></li>
							<li><a href="">站酷APP</a></li>
							<li><a href="">站酷字库</a></li>
						</ul>	
						</li>
					</ul>
				</li>
				<li class="header3">
					<ul>
						<li><a href="" class="header3_a"><span class="iconfont icon-sousuo"></span></a></li>
						<li><a href="" class="header3_a"><span class="iconfont icon-yunshangchuan"></span></a></li>
						<li><a href="" class="header3_b">登录</a></li>
						<li><a href="" class="header3_b">|</a></li>
						<li><a href="" class="header3_b">注册</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!--页首结束-->
		<!--图片背景-->
		<div id="" class="tc-bg">
			<div id="" class="bg-image">
				<img src="../img/lnz-黄昏大厦.jpg" class="peoplebg" style="width: 180%;margin-left: -415px;height: 344px;"/>
			</div>
			
			<div id="" class="data-box-lift1">
				人气
				<span title="人气" class="date-number1">2476977</span>
			</div>
			<div id="" class="data-box-lift2">
				创作
				<span title="创作" class="date-number2">1128504</span>
			</div>
			<div class="city-name">北京</div>
			<div id="" class="data-box-right1">
				设计师
				<span title="设计师" class="date-number3">939691</span>
			</div>
			<div id="" class="data-box-right2">
				生活圈
				<span title="生活圈" class="date-number4">11890</span>
			</div>
		</div>
		<div class="nav-box">
			<div class="wrapper">
				<ul>
					<li><a href="同城 - 首页 - 站酷(ZCOOL).html" class="a1">首页</a></li>
					<li><a href="同城 - 创作 - 站酷(ZCOOL).html" class="a2">创作</a></li>
					<li><a href="同城 - 生活圈 - 站酷(ZCOOL).html" class="a3">生活圈</a></li>
					<li><a href="同城 - 设计师 - 站酷(ZCOOL).html" class="a4">设计师</a></li>
				</ul>
			</div>
		</div>
		<!--图片背景的结束-->
		<div class="container">
			<div class="backtop">
				<span class="iconfont icon-shangbiao"></span>
			</div>
			<div class="active-title">
				<span>这个城市正在发生</span>
				<div class="more">
					<span>更多&nbsp;丅</span>
					<div class="more-list">
						<ul>
							<li><a href="#">发图片</a></li>
							<li><a href="#">发生活圈消息</a></li>
							<li><a href="#">我关注的生活</a></li>
							<li><a href="#">我的生活</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="active-show1">
				<div class="active-jieshao">
					<div class="touxiang">
						<img src="../img/lnz-hotquan-作者头像1.jpg" style="width: 48px; height: 48px; border-radius: 50%;"/>
						
					</div>
					<div class="left">
						<a href="#">麋鹿ZW</a>
						<span>2020-01-17</span>
					</div>
					<div class="guanzhu-box">
						<input type="button" name="" id="" value="关注" class=""/>
					</div>
				</div>
				<div class="active-wangzhi">
					<p>https://www.zcool.com.cn/work/ZNDIyOTI2MDA=.html</p>
					<p>欢迎各位来瞧瞧<img src="../img/lnz-hotquan-Billd_lalala.gif"/><img src="../img/lnz-hotquan-Billd_lalala.gif"/></p>
				</div>
				<div class="active-img">
					<img src="../img/lnz-hotquan-作者图片1.jpg"/>
				</div>
				<div class="active-liuyan">
					<img src="../img/lnz-hotquan-作者头像5.jpg" alt="" style="width: 30px; height: 30px;" />
					<img src="../img/lnz-hotzuo-show-作者-图5.jpg" alt="" style="width: 30px; height: 30px;" />
					<span class="iconfont icon-xinaixin"></span>
				</div>
				<div class="active-DLtishi">
					<button>登陆</button>
					<span>后发布评论</span>
				</div>
				<div class="active-pinglun">
					<a href="">添加表情</a>
					<a href="">评论</a>
				</div>
			</div>
			<div class="active-show1">
				<div class="active-jieshao">
					<div class="touxiang">
						<img src="../img/lnz-hotquan-作者头像2.jpg" style="width: 48px; height: 48px; border-radius: 50%;"/>
						
					</div>
					<div class="left">
						<a href="#">Z08855230</a>
						<span>2020-01-17</span>
					</div>
					<div class="guanzhu-box">
						<input type="button" name="" id="" value="关注" class=""/>
					</div>
				</div>
				<div class="active-wangzhi">
					<p>https://www.zcool.com.cn/work/ZNDIyOTI2MDA=.html</p>
					<p>欢迎各位来瞧瞧<img src="../img/lnz-hotquan-Billd_lalala.gif"/><img src="../img/lnz-hotquan-Billd_lalala.gif"/></p>
				</div>
				<div class="active-img">
					<img src="../img/lnz-hotquan-作者图片2.jpg"/>
				</div>
				<div class="active-liuyan">
					<img src="../img/lnz-hotquan-作者头像5.jpg" alt="" style="width: 30px; height: 30px;" />
					<img src="../img/lnz-hotzuo-show-作者-图5.jpg" alt="" style="width: 30px; height: 30px;" />
					<span class="iconfont icon-xinaixin"></span>
				</div>
				<div class="active-DLtishi">
					<button>登陆</button>
					<span>后发布评论</span>
				</div>
				<div class="active-pinglun">
					<a href="">添加表情</a>
					<a href="">评论</a>
				</div>
			</div>
			<div class="active-show1">
				<div class="active-jieshao">
					<div class="touxiang">
						<img src="../img/lnz-hotquan-作者头像3.jpg" style="width: 48px; height: 48px; border-radius: 50%;"/>
						
					</div>
					<div class="left">
						<a href="#">Z08855230</a>
						<span>2020-01-17</span>
					</div>
					<div class="guanzhu-box">
						<input type="button" name="" id="" value="关注" class=""/>
					</div>
				</div>
				<div class="active-wangzhi">
					<p>https://www.zcool.com.cn/work/ZNDIyOTI2MDA=.html</p>
					<p>欢迎各位来瞧瞧<img src="../img/lnz-hotquan-Billd_lalala.gif"/><img src="../img/lnz-hotquan-Billd_lalala.gif"/></p>
				</div>
				<div class="active-img">
					<img src="../img/lnz-hotquan-作者图片3.jpg"/>
				</div>
				<div class="active-liuyan">
					<img src="../img/lnz-hotquan-作者头像5.jpg" alt="" style="width: 30px; height: 30px;" />
					<img src="../img/lnz-hotzuo-show-作者-图5.jpg" alt="" style="width: 30px; height: 30px;" />
					<span class="iconfont icon-xinaixin"></span>
				</div>
				<div class="active-DLtishi">
					<button>登陆</button>
					<span>后发布评论</span>
				</div>
				<div class="active-pinglun">
					<a href="">添加表情</a>
					<a href="">评论</a>
				</div>
			</div>
			<div class="active-show1" style="height: 930px;">
				<div class="active-jieshao">
					<div class="touxiang">
						<img src="../img/lnz-hotquan-作者头像-4.jpg" style="width: 48px; height: 48px; border-radius: 50%;"/>
						
					</div>
					<div class="left">
						<a href="#">临囖喔</a>
						<span>2020-01-26</span>
					</div>
					<div class="guanzhu-box">
						<input type="button" name="" id="" value="关注" class=""/>
					</div>
				</div>
				<div class="active-wangzhi">
					<p>产品海报</p>
				</div>
				<div class="active-img">
					<img src="../img/lnz-hotquan-作者图片4.jpg" style="width: 840px; height: 472.5px;"/>
				</div>
				<div class="active-liuyan" style="top: 700px;">
					<img src="../img/lnz-hotquan-作者头像5.jpg" alt="" style="width: 30px; height: 30px;" />
					<img src="../img/lnz-hotzuo-show-作者-图5.jpg" alt="" style="width: 30px; height: 30px;" />
					<span class="iconfont icon-xinaixin"></span>
				</div>
				<div class="active-DLtishi" style="top: 780px;">
					<button>登陆</button>
					<span>后发布评论</span>
				</div>
				<div class="active-pinglun" style="top: 840px;">
					<a href="">添加表情</a>
					<a href="">评论</a>
				</div>
			</div>
			<div class="active-show1" style="height: 930px;">
				<div class="active-jieshao">
					<div class="touxiang">
						<img src="../img/lnz-hotquan-作者头像-5.jpg" style="width: 48px; height: 48px; border-radius: 50%;"/>
						
					</div>
					<div class="left">
						<a href="#">郝大仙hem</a>
						<span>2020-01-17</span>
					</div>
					<div class="guanzhu-box">
						<input type="button" name="" id="" value="关注" class=""/>
					</div>
				</div>
				<div class="active-wangzhi">
					<p>新年大吉，百病不侵吧</p>
				</div>
				<div class="active-img" style="width: 840px; height: 500px;">
					<img src="../img/lnz-hotquan-作者图片5.jpg" style="width: 840px; height: 472.5px;"/>
				</div>
				<div class="active-liuyan" style="top: 700px;">
					<img src="../img/lnz-hotquan-作者头像5.jpg" alt="" style="width: 30px; height: 30px;" />
					<img src="../img/lnz-hotzuo-show-作者-图5.jpg" alt="" style="width: 30px; height: 30px;" />
					<span class="iconfont icon-xinaixin"></span>
				</div>
				<div class="active-DLtishi" style="top: 780px;">
					<button>登陆</button>
					<span>后发布评论</span>
				</div>
				<div class="active-pinglun" style="top: 840px;">
					<a href="">添加表情</a>
					<a href="">评论</a>
				</div>
			</div>
			<div class="findmore">查看更多</div>
		</div>
		<!--以下是页脚的开始-->
		<div id="footer">
			<ul class="footer_top">
				<li><span class="iconfont icon-shouji"></span><a href="">移动版</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">加入站酷</a></li>
				<li><a href="">用户协议</a></li>
				<li><a href="">隐私政策</a></li>
				<li><a href="">侵权申诉</a></li>
				<li><a href="">企业服务</a></li>
				<li><a href="">帮助中心</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">中文</a></li>
				<li><a href="">English</a></li>
				<li><span class="iconfont icon-weixin"></span></li>
				<li><span class="iconfont icon-weibo"></span></li>
			</ul>
			<ul class="footer_down">
				<li>
					<ul class="shangmianzi">
						<li><a href=""><img src="../img/lbd_公安局.png"/>京公网安备11010502000501号</a><i></i></li>
						<li><a href="">广播电视节目制作经营许可证（京）字第06990号</a><i></i></li>
						<li><a href="">京ICP备11017824号</a><i></i></li>
						<li><a href="">京ICP证130164号</a></li>
					</ul>
				</li>
				<li>
					<ul class="xiamianzi">
						<li><a href="">营业执照</a><i></i></li>
						<li><a href="">网上有害信息举报专区</a><i></i></li>
						<li><a href="">不良信息举报电话：010-56538658</a><i></i></li>
						<li><a href="">举报邮箱 jubao@zcool.com.cn </a><i></i></li>
						<li><a href="">联系电话：010-56538600</a></li>
						<li><a href="">Copyright © 2006-2020 ZCOOL站酷</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!--以上是页脚的结束-->
	</body>
</html>
<script type="text/javascript">
	$(".more").mouseover(function(){
		$(".more-list").show();
	})
	$(".more").mouseout(function(){
		$(".more-list").hide();
	})
	//	按钮颜色转换
	$(".backtop").mouseover(function(){
		$(this).children().css("color","black");
	})
	$(".backtop").mouseout(function(){
		$(this).children().css("color","white");
	})
//	点击事件,0.3s返回顶部
	$(".backtop").click(function(){
		$("html,body").animate({scrollTop: "0px"})
	});
	$(window).scroll(function(){
		if($(window).scrollTop() >= 450){
			$(".backtop").fadeIn(200);
		}else{
			$(".backtop").fadeOut(200);
		}
		if($(window).scrollTop() > 5350){
			$(".backtop").css({"position":"absolute","display":"block","float":"right","right":"80px","bottom":"40px"});
		}else{
			$(".backtop").css({"position":"fixed","display":"none","float":"right","right":"80px","bottom":"40px"});
		}
	});
	console.log($(window).scrollTop());
</script>